<template>
  <div id="result">
    <el-container>
      <el-aside>
        <side-bar :categories="categories" @category-selected="switchCategory" />
      </el-aside>
      <el-main>
        <el-row :gutter="20">
<!--          矩阵-->
          <el-col :span="6" v-for="i in pagedData" :key="i.id">
            <book-item
              :id="i.id"
              :title="i.title"
              :price="i.price"
              :url="i.imgUrl"/>
          </el-col>
          <template v-if="page !== 1 && this.lessItems !== 0">
            <el-col :span="6" v-for="i in lessItems" :key="i">
              <div class="placeholder" />
            </el-col>
          </template>
        </el-row>
        <el-row>
<!--          分页器-->
          <el-col :span="20" :push="1">
            <el-pagination
                :total="this.filteredData.length"
                :page-size="16"
                hide-on-single-page
                :current-page.sync="page"
            />
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import SideBar from "@/components/books/SideBar";
import BookItem from "@/components/books/BookItem";

const itemsPerPage = 16

export default {
  name: "SearchResultView",
  components: {BookItem, SideBar},
  data() {
    return {
      items: [],
      page: 1,
      category: "all",
      categories: []
    }
  },
  methods: {
    switchCategory(val) {
      this.category = val;
      this.page = 1;
    },
    fetchResults() {
      axios.get(`/api/book/search?keyword=${this.keyword}`)
          .then(res => {
            this.items = res.data;
          })
          .catch(e => {
            if (e.response) {
              this.$message({
                message: `未知的服务器错误 代码${e.response.status}`,
                type: "error"
              });
            } else {
              this.$message({
                message: `未知的错误`,
                type: "error"
              });
            }
          })
    },
    fetchCategories() {
      axios.get("/api/book/fetchCategories")
          .then(res => {
            this.categories = res.data
          })
          .catch(e => {
            if (e.response) {
              this.$message({
                message: `未知的服务器错误 代码${e.response.status}`,
                type: "error"
              });
            } else {
              this.$message({
                message: `未知的错误`,
                type: "error"
              });
            }
          })
    }
  },
  computed: {
    filteredData() {  // 根据类目过滤数据, 基于category和items
      if (this.category === "all") {
        return this.items
      } else {
        return this.items.filter((i) => i.categoryId === parseInt(this.category))
      }
    },
    pagedData() {  // 分页后的数据, 基于filteredData
      return this.filteredData.slice((this.page - 1) * itemsPerPage, this.page * itemsPerPage)
    },
    lessItems() {  // 对当前页面而言, 还有多少条目可以填满页面
      return itemsPerPage - this.pagedData.length
    }
  },
  props: {
    keyword: String
  },
  watch: {
    keyword() {
      this.fetchResults();
    }
  },
  beforeMount() {
    // 抓取搜索结果
    this.fetchResults();

    // 更新类目表
    this.fetchCategories();
  }
}
</script>

<style scoped>
.placeholder {
  width: 276px;
  height: 352px;
}
</style>